<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      :title="showTitle"
      :visible.sync="showDialog"
      width="600px"
      @close="btnCancel"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="formData"
        label-width="80px"
        style="width: 100%"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="formData.name"
            placeholder="请输入车辆类型"
            maxlength="30"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="formData.allowableLoad"
            placeholder="请输入应载重量"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >吨</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="formData.allowableVolume"
            placeholder="请输入应载体积"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >立方</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model="formData.measureLong"
            placeholder="请输入长"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model="formData.measureWidth"
            placeholder="请输入宽"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model="formData.measureHigh"
            placeholder="请输入高"
          >
            <span
              slot="suffix"
              style="
                    color: #20232a;
                    font-weight: 400;
                    font-size: 14px;
                    font-family: PingFangSC, PingFangSC-Regular;
                    margin-right: 14px;
                  "
            >米</span>
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="btnOK"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="btnCancel"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, detail, update } from '@/api/transit'
export default {
  props: {
    currentNodeId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showDialog: false,
      formData: {
        name: '',
        allowableLoad: null,
        allowableVolume: null,
        measureLong: '0.0',
        measureWidth: '0.0',
        measureHigh: '0.0'
      },
      rules: {
        name: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (!/^0\.([0-9]|\d[0-9])$|^[0-9]\d{0,2}\.\d{0,2}$|^[0-9]\d{0,2}$/.test(value)) {
              callback(new Error('请输入最大3位且保留小数点后2位的数值'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (!/^0\.([0-9]|\d[0-9])$|^[0-9]\d{0,2}\.\d{0,2}$|^[0-9]\d{0,2}$/.test(value)) {
              callback(new Error('请输入最大3位且保留小数点后2位的数值'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '长不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (!/^0\.([0-9]|\d[0-9])$|^[0-9]\d{0,2}\.\d{0,2}$|^[0-9]\d{0,2}$/.test(value)) {
              callback(new Error('请输入最大3位且保留小数点后2位的数值'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '宽不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (!/^0\.([0-9]|\d[0-9])$|^[0-9]\d{0,2}\.\d{0,2}$|^[0-9]\d{0,2}$/.test(value)) {
              callback(new Error('请输入最大3位且保留小数点后2位的数值'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '高不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (!/^0\.([0-9]|\d[0-9])$|^[0-9]\d{0,2}\.\d{0,2}$|^[0-9]\d{0,2}$/.test(value)) {
              callback(new Error('请输入最大3位且保留小数点后2位的数值'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑车型' : '新增车型'
    }
  },
  methods: {
    // 打开弹层
    openDialog() {
      this.showDialog = true
    },
    // 取消
    btnCancel() {
      this.showDialog = false
      this.$refs.form.resetFields()
      this.formData = {
        id: null,
        name: '',
        allowableLoad: null,
        allowableVolume: null,
        measureLong: '0.0',
        measureWidth: '0.0',
        measureHigh: '0.0'
      }
    },
    // 确认
    btnOK() {
      this.$refs.form.validate(async(isOK) => {
        if (isOK) {
          let res = null
          let msg = '新增'
          if (this.formData.id) {
            res = await update(this.formData.id, this.formData)
            msg = '更新'
          } else {
            res = await add(this.formData)
          }
          if (res.code === 200) {
            this.$message.success(`${msg}车型成功`)
            this.$emit('updateCarModelsList')
          } else {
            this.$message.error(res.msg)
          }
          this.btnCancel()
        }
      })
    },
    async getCarModelDetail() {
      const { data } = await detail(this.currentNodeId)
      this.formData = data
    }
  }
}
</script>
<style lang="scss" scoped>
.add-form-dialog {
  ::v-deep .el-dialog__body {
    padding: 40px 60px 0 50px !important;
  }
}
</style>

